<template>
  <div id="VuexStore">
    VuexStore：{{showAAA}}
    <h2>mapState中的数据：{{ countAlias }}</h2>
    <h2>mapGetters使用计算：{{ showGet }}</h2>
    <h2>
      mapMutations 中的方法使用：
      <button @click="useStoreMutatio">直接使用 mutation 中的方法</button>
      <button @click="btn">使用mutation方法</button>
      <button @click="useMutations">在methods中的使用state中的mutation</button>
    </h2>
    <h2>
      mapActions 中的方法使用
      <button @click="btnActions">使用actions中的方法</button>
    </h2>
    <h2>使用不同的modules中的name：{{ names }}</h2>
  </div>
</template>
<script>

import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions,
} from 'vuex'

export default {
  name: 'vuexstore',
  mounted() {
    // 获取到 store中的数据
    // console.log( this.$store.state );
    // console.log( this.$store.state.aModules.names )
  },
  methods: {
    // mutation 中的方法
    ...mapMutations(['btn', 'useMutationsInMehtods']),
    // actions 中的方法
    ...mapActions(['actionsDispatchFn']),

    useStoreMutatio(){
      // 提交状态
      this.$store.commit('btn', {num: 1})
    },
    useMutations(){
      this.useMutationsInMehtods()
    },
    btn() {
      console.log('优先使用问题 !!!')
    },

    // actions 使用
    btnActions() {
      this.actionsDispatchFn()
    }

  },

  computed: {
    ...mapState(['countAlias', ]),
    ...mapState({
      names: state => state.aModules.names
    }),
    ...mapGetters(['showGet']),

    showAAA: () => {
      return "showAAA"
    }
  },
}
</script>